<template>
  <div class="greenhouse_wrapper">
    <div class="page_title">
      <div>智慧大棚</div>
      <div>ZHI HUI DA PENG</div>
    </div>
    <div class="weather">
      <ul>
        <li class="date">
          12:22:12.352<br />
          <span>2019.7.10</span>
        </li>
        <li class="degree">
          <img src="@/images/home/tianqi.png" alt="" />
          <span>26℃</span>
        </li>
      </ul>
    </div>
    <div class="page_body">
      <div class="body_left">
        <div>
          <div class="left_top">
            <div v-for="(item, i) in state.leftTop" :key="i">
              <div>
                <img :src="item.img" alt="" />
              </div>
              <div class="value">
                {{ item.value }}
              </div>
              <div class="name">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="box"></div>
          <div class="left_bottom">
            <div class="echarts_box">
              <echarts-box :option="state.leftChart"></echarts-box>
            </div>
          </div>
        </div>
        <div>
          <div class="title">设备故障状态</div>
          <div>
            <img src="@/images/greenhouse/pic2.png" alt="" />
          </div>
          <div class="echarts_box">
            <echarts-box :option="state.zhu3"></echarts-box>
          </div>
        </div>
      </div>
      <div class="body_middle">
        <div>
          <img src="@/images/greenhouse/pic.png" alt="" />
        </div>
        <div>
          <div v-for="(item, i) in state.ulList" :key="i">
            <div><img :src="item.icon" alt="" /></div>
            <div>
              <div>{{ item.value }}</div>
              <div>{{ item.tips }}</div>
            </div>
          </div>
        </div>
        <div>
          <div class="bottom_title">耕地类型统计</div>
          <div class="echarts_box">
            <echarts-box :option="state.landPercent"></echarts-box>
          </div>
        </div>
      </div>
      <div class="body_right">
        <div>
          <div class="title">种植区温度走势</div>
          <div class="degreelist">
            <template v-for="(item, i) in state.degrees" :key="i">
              <div v-show="i < 2" :class="'bg_' + (i + 1)">
                <div>{{ item.value }}</div>
                <div>{{ item.tips }}</div>
              </div>
            </template>
          </div>
          <div class="degreelist">
            <template v-for="(item, i) in state.degrees" :key="i">
              <div v-show="i > 1" :class="'bg_' + (i + 1)">
                <div>{{ item.value }}</div>
                <div>{{ item.tips }}</div>
              </div>
            </template>
          </div>
        </div>
        <div>
          <div class="title">室外环境监测</div>
          <div class="weather_list">
            <div>
              <div v-for="(item, i) in state.weatherList" :key="i" v-show="i < 3">
                <div><img :src="item.icon" alt="" /></div>
                <div>{{ item.name }}</div>
                <div>{{ item.value }}</div>
              </div>
            </div>

            <div>
              <div v-for="(item, i) in state.weatherList" :key="i" v-show="i > 1">
                <div><img :src="item.icon" alt="" /></div>
                <div>{{ item.name }}</div>
                <div>{{ item.value }}</div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="title">数据统计</div>
          <div class="sub_title">GDP计算依据（ 截至本月底增速（%））</div>
          <div class="news">
            <div v-for="(item, i) in state.news" :key="i">
              <div>{{ item.title }}</div>
              <div>{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import echartsBox from "@/components/echarts-box.vue";
import * as echarts from "echarts";
import { reactive } from 'vue-demi';
import left1 from '@/images/greenhouse/1.png'
import left2 from '@/images/greenhouse/2.png'
import left3 from '@/images/greenhouse/3.png'
import mid1 from '@/images/greenhouse/4.png'
import mid2 from '@/images/greenhouse/5.png'
import mid3 from '@/images/greenhouse/6.png'
import mid4 from '@/images/greenhouse/7.png'
import mid5 from '@/images/greenhouse/8.png'
import right1 from '@/images/greenhouse/13.png'
import right2 from '@/images/greenhouse/14.png'
import right3 from '@/images/greenhouse/15.png'
import right4 from '@/images/greenhouse/16.png'
import right5 from '@/images/greenhouse/17.png'
const state = reactive({
      // 左上角
      leftTop: [
        {
          img: left1,
          value: "3025",
          name: "可食用量",
        },
        {
          img: left2,
          value: "2065",
          name: "食品流通数量",
        },
        {
          img: left3,
          value: "1036",
          name: "食品生产数量",
        },
      ],
      // 左侧图
      leftChart: {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          name: "单位：亿元",
          data: ["大棚1", "大棚2", "大棚3", "大棚4", "大棚5", "大棚6"],
        },
        series: [
          {
            name: "生产总值",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              barBorderRadius: [0, 8, 8, 0], //柱体圆角

              color: new echarts.graphic.LinearGradient(
                //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                //通过修改前4个参数，可以实现不同的渐变方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                0,
                0,
                0,
                1,
                [
                  {
                    //代表渐变色从正上方开始
                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: "#2FC6DC",
                  }, //柱图渐变色
                  {
                    offset: 1, //指100%处的颜色
                    color: "#30C6DC",
                  },
                ]
              ),
            },
            data: [18, 50, 30, 100, 90, 150],
          },
        ],
      },
      // 中间部分列表数据
      ulList: [
        {
          icon: mid1,
          value: "正常",
          tips: "水源指数",
        },
        {
          icon: mid2,
          value: "7837.33",
          tips: "主干道水源湿度",
        },
        {
          icon: mid3,
          value: "17℃",
          tips: "主干道水源PH值",
        },
        {
          icon: mid4,
          value: "3719.2M",
          tips: "当前水压",
        },
        {
          icon: mid5,
          value: "3719.2M",
          tips: "当前水压",
        },
      ],
      //   中间部分图表
      landPercent: {
        backgroundColor: "rgba(0,0,0,0)",
        grid: { top: "10%", left: "7%", right: "5%", bottom: "19%" },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "01月",
            "02月",
            "03月",
            "04月",
            "05月",
            "06月",
            "07月",
            "08月",
            "09月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [
              820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290,
            ],
            type: "line",
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0.1, color: "#20FFE7" },
                  { offset: 1, color: "#00FFF0" },
                ]),
              },
            },
            showSymbol: false,
            itemStyle: {
              normal: {
                color: "#8cd5c2", //改变折线点的颜色
                lineStyle: {
                  color: "#3FFFFF", //改变折线颜色
                },
              },
            },
          },
        ],
      },
      //   柱状图
      zhu3: {
        backgroundColor: "rgba(0,0,0,0)",
        grid: { top: "10%", left: "5%", right: "5%", bottom: "30%" },
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["data1", 43.3, 85.8, 93.7],
            ["data2", 83.1, 73.4, 55.1],
            ["data1", 86.4, 65.2, 82.5],
            ["data12", 86.4, 65.2, 82.5],
            ["data13", 86.4, 65.2, 82.5],
            ["data14", 86.4, 65.2, 82.5],
          ],
        },
        xAxis: { type: "category" },
        yAxis: {
          axisLabel: { show: false }, //显示x轴的数值
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: "bar",
            barWidth: 15, //柱图宽度
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                //通过修改前4个参数，可以实现不同的渐变方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                0,
                0,
                0,
                1,
                [
                  {
                    //代表渐变色从正上方开始
                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: "#CD3930",
                  }, //柱图渐变色
                  {
                    offset: 1, //指100%处的颜色
                    color: "#F2F341",
                  },
                ]
              ),
            },
          },
          {
            type: "bar",
            barWidth: 15, //柱图宽度
            itemStyle: {
              barBorderRadius: [4, 4, 0, 0], //柱体圆角
              color: new echarts.graphic.LinearGradient(
                //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                //通过修改前4个参数，可以实现不同的渐变方向
                /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                0,
                0,
                0,
                1,
                [
                  {
                    //代表渐变色从正上方开始
                    offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                    color: "#3DF1D6",
                  }, //柱图渐变色
                  {
                    offset: 1, //指100%处的颜色
                    color: "#185DBA",
                  },
                ]
              ),
            },
          },
        ],
      },
      //   右侧部分温度走势
      degrees: [
        { value: "32.4­°C", tips: "A区温度" },
        { value: "32.4­°C", tips: "B区温度" },
        { value: "32.4­°C", tips: "C区温度" },
        { value: "32.4­°C", tips: "D区温度" },
      ],

      //   数据统计
      news: [
        {
          title: "规模以上制造业不变价增加值增长速度* ",
          value: "1.1%",
        },
        {
          title: "规模以下工业不变价增加值增长速度*",
          value: "1.1%",
        },
        {
          title: "注册地总承包和专业承包建筑业企业总产值增速*",
          value: "-4.8%",
        },
        {
          title: "注册地总承包和专业承包建筑业企业总产值增速*",
          value: "-4.8%",
        },
        {
          title: "注册地总承包和专业承包建筑业企业总产值增速*",
          value: "-4.8%",
        },
      ],
      //   室外环境检测
      weatherList: [
        {
          icon: right1,
          name: "实时温度",
          value: "25℃",
        },
        {
          icon: right2,
          name: "风速",
          value: "10m/s",
        },
        {
          icon: right3,
          name: "当前湿度",
          value: "57%",
        },
        {
          icon: right4,
          name: "近1小时降水",
          value: "0",
        },
        {
          icon: right5,
          name: "风向",
          value: "东南",
        },
      ],
})
</script>

<style lang="scss" scoped>
.greenhouse_wrapper {
  width: 100%;
  height: 100vh;
  position: relative;
  background: url("@/images/greenhouse/greenhouseBg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .page_title {
    width: 100%;
    text-align: center;
    padding-top: 30px;
    > div:nth-of-type(1) {
      padding-top: 10px;
      font-size: 28px;
      font-weight: bolder;
      background-image: linear-gradient(#62ffd8, #ffffff);
      -webkit-background-clip: text;
      color: transparent;
    }
    > div:nth-of-type(2) {
      margin-top: 14px;
    }
  }
  .weather {
    position: absolute;
    top: 22px;
    right: 10px;
    ul > li {
      display: inline-block;
      text-align: right;

      padding: 0 25px;
    }
    .date {
      border-right: 1px solid #8c8c8a;
      font-size: 20px;
      font-weight: bolder;
      span {
        font-size: 10px;
        color: #969696;
      }
    }
    .degree {
      display: inline-block;
      img {
        width: 48px;
        height: 37px;
        vertical-align: bottom;
      }
      span {
        display: inline-block;
        font-size: 23px;
        font-weight: bolder;
      }
    }
  }
  .page_body {
    flex: 1;
    padding: 25px 30px 45px 30px;
    display: flex;
    .body_left,
    .body_right {
      flex: 1;
      > div {
        background: url("@/images/greenhouse/divBg.png") no-repeat;
        background-size: 100% 100%;
        > .title {
          font-size: 18px;
          line-height: 32px;
          font-weight: bolder;
          margin-top: 10px;
          background: url("@/images/greenhouse/txtBg.png") no-repeat;
          background-size: 50% 100%;
          text-indent: 15px;
        }
      }
    }
    .body_middle {
      flex: 2;
    }

    .body_left {
      display: flex;
      flex-direction: column;

      > div:nth-of-type(1) {
        flex: 5;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        .left_top {
          flex: 0.5;
          display: flex;
          justify-content: space-around;
          text-align: center;
          padding-bottom: 20px;
          img {
            width: 110px;
            height: 110px;
          }
          .value {
            font-size: 34px;
            // z-index: 99;
            padding-top: 4px;
            font-weight: bolder;
            background-image: linear-gradient(#e2f0fe, #2b92b8);
            -webkit-background-clip: text;
            color: transparent;
          }
          .name {
            font-size: 14px;
            font-weight: bold;
          }
        }

        .box {
          width: calc(100% - 20px);
          height: 2px;
          margin: 0 10px;
          background: -webkit-linear-gradient(
            left,
            #fff -4%,
            #00c6ff 50%,
            #fff 100%
          );
        }
        .left_bottom {
          margin-top: 10px;
          flex: 1;
          .echarts_box {
            width: 100%;
            height: 100%;
          }
        }
      }
      > div:nth-of-type(2) {
        flex: 4;
        display: flex;
        flex-direction: column;
        > div:nth-of-type(2) {
          padding: 20px;
          height: 190px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        > div:nth-of-type(3) {
          flex: 1;
        }
      }
    }

    .body_right {
      display: flex;
      flex-direction: column;
      > div:nth-of-type(1) {
        flex: 4;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        .degreelist {
          width: 100%;
          flex: 1;
          display: flex;
          justify-content: space-around;
          > div {
            width: 146px;
            height: 146px;
            padding: 20px;
            text-align: center;

            > div:nth-of-type(1) {
              font-size: 30px;
              font-weight: bolder;
              color: #15e1fd;
              margin-top: 30%;
            }
            > div:nth-of-type(2) {
              font-size: 12px;
            }
          }
          .bg_1 {
            background: url("@/images/greenhouse/9.png") no-repeat;
            background-size: 100% 100%;
          }
          .bg_2 {
            background: url("@/images/greenhouse/10.png") no-repeat;
            background-size: 100% 100%;
          }
          .bg_3 {
            background: url("@/images/greenhouse/11.png") no-repeat;
            background-size: 100% 100%;
          }
          .bg_4 {
            background: url("@/images/greenhouse/12.png") no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      > div:nth-of-type(2) {
        flex: 2.5;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        .weather_list {
          flex: 1;
          padding: 10px 0 10px 10px;
          display: flex;
          > div {
            flex: 1;
            margin-right: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            > div {
              height: 100%;
              margin-bottom: 10px;
              display: flex;
              align-items: center;
              padding: 10px;
              background: url("@/images/greenhouse/divBg.png") no-repeat;
              background-size: 100% 100%;
              > div:nth-of-type(1) {
                width: 30px;
                img {
                  width: 20px;
                  height: 20px;
                }
              }
              > div:nth-of-type(2) {
                flex: 1;
                font-size: 14px;
                font-weight: bolder;
              }
              > div:nth-of-type(3) {
                text-align: right;
                font-size: 14px;
                font-weight: bolder;
              }
            }
          }
        }
      }
      > div:nth-of-type(3) {
        flex: 2.5;
        display: flex;
        flex-direction: column;
        .sub_title {
          padding-left: 15px;
          margin-top: 15px;
          font-size: 14px;
          font-weight: bold;
          color: #00d8ff;
        }
        .news {
          flex: 1;
          margin: 15px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          > div {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #7fdaf8;
            > div:nth-of-type(1) {
              font-size: 12px;
              line-height: 24px;
            }
            > div:nth-of-type(2) {
              font-size: 18px;
              font-weight: bolder;
              background-image: linear-gradient(#e1fcf4, #37c5b9);
              -webkit-background-clip: text;
              color: transparent;
            }
          }
        }
      }
    }

    .body_middle {
      display: flex;
      flex-direction: column;
      margin: 0 20px;
      > div:nth-of-type(1) {
        flex: 1.9;
        img {
          width: 100%;
          height: 100%;
        }
      }
      > div:nth-of-type(2) {
        height: 45px;
        margin: 20px;
        display: flex;
        justify-content: space-between;
        > div {
          display: flex;
          align-items: center;
          img {
            width: 45px;
            height: 45px;
            margin-right: 10px;
          }
          > div {
            > div:nth-of-type(1) {
              font-size: 26px;
              font-weight: bolder;
            }
            > div:nth-of-type(2) {
              font-size: 12px;
            }
          }
        }
      }
      > div:nth-of-type(3) {
        flex: 1;
        display: flex;
        flex-direction: column;
        background: url("@/images/greenhouse/chartBg.png") no-repeat;
        background-size: 100% 100%;
        .bottom_title {
          height: 32px;
          margin-top: 20px;
          line-height: 32px;
          font-size: 20px;
          font-weight: bolder;
          background: url("@/images/greenhouse/txtBg.png") no-repeat;
          background-size: 50% 100%;
          text-indent: 15px;
        }
        .echarts_box {
          flex: 1;
        }
      }
    }
  }
}
</style>
